<template>
    <div>
        <div class="detailsBody">
            <img src="../../../../../assets/productImg/banner.jpg" alt="" >
            <div class="detailsBodyContent">
                <div class="detailsBodyContentTitle">
                    <span>首页></span>
                    <!--                    //变动1，产品详情，新闻中心，星火实验室-->
                    <a class="threeMore" @click="tothat">{{select|fire}}</a>
                    <span><i class="el-icon-alarm-clock"></i>{{newsContent.time}}</span>
                </div>
                <div class="detailsBodyContentBody">
                    <p class="floatRight"><span class="el-icon-s-grid"  @click="toIndex"></span></p>
                    <h2>{{newsContent.name}}</h2>
                    <div v-html="newsContent.details"></div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    // eslint-disable-next-line no-unused-vars
    import {getLaboratoryList, getLaboratoryNews, getNewsList,getProductListId} from "../../api";

    export default {
        name: "detailsMain",
        components: {},
        data() {
            return {
                newsContent: {
                    time: "2019-12-11",
                    name: '默认名称',
                    details: "默认内容"
                },
            }
        },
        props: {
            select: String,
            id: String,
        },
        methods: {
            goBack() {
                this.$router.go(-1)
            },
            toIndex(){
                this.$router.push('index')
            },
            tothat (){
                if (this.select == '公司新闻') {
                    this.$router.push('/news/newsIn')
                }
                if (this.select == '星火项目') {
                    this.$router.push('/news/laboratoryIn')
                }
                if (this.select == '星火动态') {
                    this.$router.push('/news/laboratoryIn')
                }
                if (this.select=='产品详情') {
                    this.$router.push('/productPage')
                }
            }
        },
        created() {
            if (this.select == '公司新闻') {
                getNewsList(this.id).then(res => {
                    console.log(res.data.data)
                    this.newsContent = res.data.data
                })
            }
            if (this.select == '星火项目') {
                getLaboratoryList  (this.id).then(res => {
                    console.log(res.data.data)
                    this.newsContent = res.data.data
                })
            }
            if (this.select == '星火动态') {
                getLaboratoryNews (this.id).then(res => {
                    console.log(res.data.data)
                    this.newsContent = res.data.data
                })
            }
            if (this.select=='产品详情') {
                getProductListId(this.id).then(res => {
                    console.log(res.data.data)
                    this.newsContent = res.data.data
                })
            }
        },
        filters:{
            fire(data){
                if(data == '星火项目'){
                    return '新闻实验室'
                }
                if(data == '星火动态'){
                    return '新闻实验室'
                }
                return data
            }
        }
    }
</script>

<style scoped>
    .detailsBody > img:nth-of-type(1) {
        display: block;
        padding-top: 70px;
    }

    .detailsBodyContent {
        padding: 0 15px;
        margin: auto;
        margin-bottom: 40px;
        width: 1200px;
        border-bottom: 1px solid #656565;
    }

    .detailsBodyContentTitle {
        padding: 20px 0;
        color: #8d8d8d;
        font-size: 14px;
        border-bottom: 1px dashed #c8c8c8;
        overflow: hidden;
    }

    .detailsBodyContentTitle > span {
        float: left;
    }

    .detailsBodyContentTitle > span:nth-last-of-type(1) {
        float: right;
    }

    .detailsBodyContentBody {
        padding-bottom: 60px;
    }

    .detailsBodyContentBody > h2 {
        margin: 40px 0 30px 0;
        text-align: center;
    }

    /deep/ .detailsBodyContentBody img {
        width: 100% !important;
    }

    .floatRight {
        padding-top: 5px;
        text-align: right;
    }
    .floatRight>span {
        cursor: pointer;
        font-size: 22px;
        color: #888889;
    }
    .threeMore:hover {
        text-decoration: underline;
        cursor: pointer;
    }
</style>